// WFFW(Webfront Framework) of W3SDK - w3sdk-1.5.0-beta (http://w3cut.cn Copyright©2019 W3)
//
// effect - 2019/12/20
// 说明：效果样式
// 用法：wffw 项目中引用

//
// settings
//

$g-effect-duration: 500ms !default;
$g-effect-ratio: 1 !default;

$duration: $g-effect-duration;
$duration-fast: $duration * 1.5;
$duration-slow: $duration * 0.5;
$ratio: $g-effect-ratio;

//
// function
//

@function ratio($val) {
	@return $val * $ratio;
}

//
// maincode
//

$default-transition-attrs: opacity $duration, color $duration, border-color $duration, background-color $duration, background-image $duration, box-shadow $duration;

// active event
.zimg {
	overflow: hidden;

	img {
		width: 100%;
		transition: transform $duration;
	}

	.wp:active & img,
	&:active img {
		transform: scale(ratio(1.05));
	}
}

.active {
	transition: transform $duration;

	&.zoom:active,
	.wp:active &.zoom {
		transform: scale(ratio(1.05));
	}

	&.up:active,
	.wp:active &.up {
		transform: translateY(ratio(-5%));
	}
	&.down:active,
	.wp:active &.down {
		transform: translateY(ratio(5%));
	}
	&.right:active,
	.wp:active &.right {
		transform: translateX(ratio(5%));
	}
	&.left:active,
	.wp:active &.rigleftht {
		transform: translateX(ratio(-5%));
	}

	&.rotate:active,
	.wp:active &.rotateC {
		transform: rotate(360deg);
	}
	&.rotateAnti:active,
	.wp:active &.rotateAnti {
		transform: rotate(-360deg);
	}
	&.rotateY:active,
	.wp:active &.rotateY {
		transform: rotateY(360deg);
	}
	&.rotateX:active,
	.wp:active &.rotateX {
		transform: rotateX(360deg);
	}
}
